<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title> 角色功能 </title>
  <link rel="stylesheet" type="text/css" href="/css/style.css" />

  <style type="text/css">
    *, body {
      margin: 0;
      font-family: '微软雅黑',serif;
    }

    .roleTable{
      text-align: center;
    }
    .funTable{
      text-align: center;
    }
    .funName{
      align-items: center;
    }
    .roleName:hover{
      cursor: pointer;
    }
    .spanPlace:hover{
      cursor: pointer;
    }
    /* 表格线合并样式 */
    .roleTable {
      border-collapse: collapse;
    }

    .roleTable th, .roleTable td {
      border: 1px solid black;
      padding: 8px;
    }

    /* 鼠标悬浮行高亮 */
    .roleTable tbody tr:hover {
      background-color: #f2f2f2;
      cursor: pointer;
    }

    /* 点击行颜色加深 */
    .roleTable tbody tr.clicked {
      background-color: #d4d4d4;
    }


  </style>

  <script type="text/javascript" src="/js/EasyUI/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="/js/EasyUI/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="/js/EasyUI/jquery.metadata.js"></script>
  <script type="text/javascript" src="/js/EasyUI/jquery.form.js"></script>

</head>

<body >


<table class="maintable" style="width:100%">
  <tr>


    <td class="rightmaintd" valign="top">
      <div style="height:40px;text-align:center;background-color:#009966">
        <p style="font-weight:bold;padding-top:10px;font-size:larger;color:white">角色功能管理</p>
      </div>
      <table class="neirontbiao" id="tbl_list" style="width:100%">
        <div style="align-content:center;margin-left:0px;width:170px;background-color:#009966; color:white;height:30px">
          <p style="padding-left:30px;padding-top:5px">角色目录</p>
        </div>
        <div>
          <table width="100%" class="roleTable">
            <thead>
            <tr>
              <th>角色名称</th>
              <th>描述</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="role : ${roleName}">
              <td class="roleName" th:text="${role.getRoleName()}" onclick="changeRoleFunShow(this)"></td>
              <td class="roleDes" th:text="${role.getDescription()}"></td>
            </tr>
            </tbody>
          </table>
        </div>
        <div style="align-content:center;margin-left:0px;width:170px;background-color:#009966; color:white;height:30px">
          <p style="padding-left:30px;padding-top:5px">权限功能</p>
        </div>
<!--        <div id="toolbar" style="height: auto;">-->
<!--          <input type="button" value="提交" class="denglubtn" onclick="submitRoleFun()">-->
<!--        </div>-->
        <div>
          <table width="100%" class="funTable">
            <tr>
              <th>权限</th>
              <th>描述</th>
            </tr>
            <tr th:each="fun : ${funName}">
              <td>
                <label>
                  <input type="checkbox" name="funName" class="funName" th:value="${fun.getName()}">
                  <span th:text="${fun.getName()}" class="spanPlace"></span>
                </label>
              </td>
              <td th:text="${fun.getRemark()}">remark</td>
            </tr>

          </table>
        </div>
        <div id="toolbar" style="height: auto;text-align: center">
          <input type="button" value="提交" class="denglubtn" onclick="submitRoleFun()">
        </div>
      </table>
    </td>
  </tr>

</table>
<script>


  var dataFun =[];
  var nowRoleName = null;

  changeRoleFunShow(document.querySelector(".roleTable").rows[1].cells[0]);
  function changeRoleFunShow(cell){
    let roleName = cell.textContent;
    nowRoleName =roleName;
    fetch('/roleFun/' + roleName)
            .then(response => response.json())
            .then(data => {
              dataFun=Array.from(data);
              boxChcek();
            })
            .catch(error => {
              console.error('Error:', error);
            });

  }
  function boxChcek(){
    // 获取所有的 funName 多选框
    var checkboxes = document.querySelectorAll('.funName');
    // 遍历多选框，并根据 dataFun 数组设置勾选状态
    checkboxes.forEach(function(checkbox) {
      var checkboxValue = checkbox.value;
      checkbox.checked = !!dataFun.includes(checkboxValue);
    });
  }
  function submitRoleFun(){
    let data = [];
    var checkboxes = document.querySelectorAll('.funName');
    checkboxes.forEach(function(checkbox) {
      if (checkbox.checked) {
        data.push(checkbox.value);
      }
    });
    var dataToSend = {
      selectedValues: data,
      name: nowRoleName
    };
    // 将选中的值和 name 发送给后端
    fetch('/roleFun', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(dataToSend)
    })
            .then(response => {
              if (!response.ok) {
                throw new Error('Network response was not ok');
              }
              else{
                alert("提交成功");
              }
            })
            .then((data) => {

            })
            .catch(error => {
              console.error('Fetch Error:', error);
            });
  }

  //这个函数是样式修改的js代码
  document.addEventListener("DOMContentLoaded", function() {
    var rows = document.querySelectorAll(".roleTable tbody tr");

    rows.forEach(function(row, index) {
      row.addEventListener("click", function() {
        rows.forEach(function(r) {
          r.classList.remove("clicked");
        });
        this.classList.add("clicked");
      });

      row.addEventListener("mouseover", function() {
        if (!this.classList.contains("clicked")) {
          this.classList.add("hovered");
        }
      });

      row.addEventListener("mouseout", function() {
        this.classList.remove("hovered");
      });

      // 默认点击tbody的第一行
      if (index === 0) {
        row.classList.add("clicked");
      }
    });
  });



</script>

</body>
</html>
